<template>
  <div>
    <headerT title="预约信息" />
    <div class="pageNormalBackground headMarginTop pagesMain">
      <div class="yuyueHead">
        <div class="yuyueBox">
          <div class="everyBlockBgcolor headContentBox">
            <div class="displayFlex goodTitleBox">
              <div class="goodsTitle">{{yuyueInfo.goods_name}}</div>
              <div class="displayFlex goodsA" @click="$tools.goPage_query('goodsDetails',{goods_id:yuyueInfo.id})">
                <p>商品信息</p>
                <img src="../../../static/images/jiatouBlue.png" alt />
              </div>
            </div>
            <div class="goodDescribe">{{yuyueInfo.goods_title}}</div>
          </div>
          <div class="everyBlockBgcolor yuyueTisiBox">
            <p class="yuyueTisiTitle">预约提示</p>
            <p class="displayFlex yuyueTisiContent" v-if="yuyueInfo.appointment_hint==null">暂无提示</p>
            <p class="displayFlex yuyueTisiContent" v-else>{{yuyueInfo.appointment_hint}}</p>
          </div>
        </div>
      </div>
      <div class="pageNormalBackground yuyueContentBox" >
        <div class="everyBlockBgcolor yuyueInfoBox">
          <div class="displayFlex yuyueTitleBox">预约信息</div>

          <div class="yuyueContent">
            <!-- <div class="displayFlex yuyueInputBox">
              <div class="yuyueInputTitle">预约产品</div>
              <div class="displayFlex yuyueInputContent">
                <input type="text" v-model="yuyueNeed.yuyueName" placeholder="输入产品" />
                <img src="../../../static/images/jiantou_gray.png" />
              </div>

            </div> -->
            <div class="displayFlex yuyueInputBox">
              <div class="yuyueInputTitle">预约数量</div>
              <div class="displayFlex yuyueInputContent">
                <input type="number" v-model="yuyueNum" placeholder="请输入预约数量" />
                <img src="../../../static/images/jiantou_gray.png" />
              </div>
            </div>
            <div class="displayFlex yuyueInputBox">
              <div class="yuyueInputTitle">预约时间</div>
              <div class="displayFlex yuyueInputContent timeBox">
                <datetime
                  v-model="yuyueNeed.yuyueTime"
                  style="border: none;width: 100%;padding:0;margin:0"
                  format="YYYY-MM-DD HH:mm"
                  @on-change="change"
                  clear-text="clear"
                  @on-clear="clearValue"
                >
                  <div class="displayFlex justBetween dateBox">
                    <input type="text" v-model="yuyueNeed.yuyueTime"  placeholder="请请选择预约时间" />
                    <img class="userjintou" src="../../../static/images/jiantou_gray.png" alt />
                  </div>
                </datetime>
              </div>
            </div>
          </div>
        </div>
        <div class="everyBlockBgcolor yuyueInfoBox consumerCodeBox">
          <div class="displayFlex yuyueTitleBox">消费码</div>
          <div class="yuyueContent yuyueCodeContent" ref="codeHtml">
            <div class="displayFlex yuyueInputBox" v-for="(item,index) in yuyueNumCodes" :key="index">
              <div class="yuyueInputTitle">消费码{{(index+1)}}</div>
              <div class="displayFlex yuyueInputContent">
                <input type="text" v-model="yuyueNumCodes[index]" placeholder="请输入消费码" />
              </div>
            </div>
          </div>
        </div>

        <div class="everyBlockBgcolor yuyueInfoBox consumerInfoBox">
          <div class="displayFlex yuyueTitleBox">客人信息</div>
          <div class="yuyueContent">
            <div class="displayFlex yuyueInputBox yuyueInputCodeBox">
              <div class="yuyueInputTitle">真实姓名</div>
              <div class="displayFlex yuyueInputContent">
                <input type="text" v-model="yuyueNeed.consumerName" placeholder="请输入全名" />
              </div>
            </div>
            <div class="displayFlex yuyueInputBox">
              <div class="yuyueInputTitle">手机号码</div>
              <div class="displayFlex yuyueInputContent">
                <input type="text" v-model="yuyueNeed.consumerPhone" placeholder="请输入手机号码" />
              </div>
            </div>
            <div class="displayFlex yuyueInputBox">
              <div class="yuyueInputTitle">备注信息</div>
              <div class="displayFlex yuyueInputContent">
                <input type="text" v-model="yuyueNeed.remark" placeholder="输入你想说的（50字以内）" maxlength="50" />
              </div>
            </div>
          </div>
        </div>

      </div>
      <div class="everyBlockBgcolor displayFlex payBox">
        <div class="payPrice">
          <b>需付：</b>
          <span>{{yuyueNum}}个消费码/到店补差￥{{chajiaPrice}}</span>
        </div>
        <div class="lijiYueBox" @click="btnYljYuyue">立即预约</div>
      </div>

      
    </div>
  </div>
</template>

<script>
import headerT from "@/components/header";
import { Datetime } from "vux";
import { appointmentList,appointmentOperation } from "@/services/yuyueProduct";
export default {
  name: "login",
  components: {
    headerT,
    Datetime
  },

  data() {
    return {
      allYuyueId:this.$route.query.allYuyueId,//预约id-商品id
      yuyueInfo:"",//预约基本信息
      yuyueNeed:{
        yuyueName:'',//预约产品
        yuyueTime:'',//预约时间
        consumerName:'',//客户姓名
        consumerPhone:'',//客户手机号
        remark:'',//备注信息
      },
      yuyueNum:1,//预约数量
      yuyueNumCodes:[],
      chajiaPrice:0,//补差价
    };
  },
  created(){
    this.yuyueNumCodes.length=this.yuyueNum
  },
  mounted(){
    this.getDetail()
  },
  watch: {
    ///预约数量决定有多少消费码
    yuyueNum(val){
      console.log(val,val)
      this.yuyueNumCodes.length=val
    },
  },

  methods: {
    //立即预约
    btnYljYuyue(){
      console.log(this.yuyueNumCodes,'yuyueNumCodes')
      if(this.yuyueNum==''){
        this.$vux.toast.text("请输入预约数量！", "top");
        return;
      }
      if(this.yuyueNeed.yuyueTime==''){
        this.$vux.toast.text("请选择预约时间！", "top");
        return;
      }
      if(this.yuyueNumCodes.length==0){
        this.$vux.toast.text("请输入消费码！", "top");
        return;
      }
      for(let i=0;i<this.yuyueNumCodes.length;i++){
        if(!this.yuyueNumCodes[i]){
          this.$vux.toast.text("请请输入消费码！", "top");
          return
        }
      }
      if(this.yuyueNeed.consumerName==''){
        this.$vux.toast.text("请输入真实姓名！", "top");
        return;
      }
      if(this.yuyueNeed.consumerPhone==''){
        this.$vux.toast.text("请输入电话号码！", "top");
        return;
      }
      let myreg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
      if(myreg.test(this.yuyueNeed.consumerPhone)==false){
        this.$vux.toast.text('请输入正确的手机号！', 'top')
        return;
      }
      let codeNums=this.yuyueNumCodes.join(',')
      let obj={
        good_id :this.allYuyueId,
        appointment_number :this.yuyueNum,
        appointment_date :this.yuyueNeed.yuyueTime,
        consume_code :codeNums,
        real_name :this.yuyueNeed.consumerName,
        real_phone  :this.yuyueNeed.consumerPhone,
        remark :this.yuyueNeed.remark,
        appointment_price:this.chajiaPrice
      }
      console.log(obj,'obj')
      
      this.$vux.loading.show({
        text: "Loading"
      });
      this.$post(appointmentOperation,obj).then(res=>{
        this.$vux.loading.hide();
        if(res.code==200){
          this.$vux.toast.text('预约成功！', 'top')
          this.getDetail()
        }
      }).catch(error=>{
        this.$vux.loading.hide();
      })
    },
    //预约详情
    getDetail(){
      this.$vux.loading.show({
        text: "Loading"
      });
      this.$post(appointmentList,{id:this.allYuyueId}).then(res=>{
        this.$vux.loading.hide();
        this.yuyueInfo=res.data.data[0]
        this.chajiaPrice=this.yuyueNum*Number(res.data.data[0].appointment_price).toFixed(2)
      }).catch(error=>{
        this.$vux.loading.hide();
      })
    },
    change(val) {//时间
      console.log(val);
    },
    clearValue(value){
      this.time=''
    }
  }
};
</script>

<style lang="less" rel="stylesheet/less" type="text/css">
@colorRed: #f64135;
@color4e :#4E4E4E;
@color9e :#9F9F9F;
@fontsize32: 0.32rem;
@fontsize3: 0.3rem;
@fontsize37: 0.37rem;
.everyPadding {
  padding: 0.25rem;
}
.pagesMain {
  // padding-bottom:1.4rem;
}

.yuyueHead {
  width: 100%;
  height: 4.73rem;
  background-image: url("../../../static/images/yuyueBg.png");
  background-size: 100%;
  background-repeat: no-repeat;
  .yuyueBox {
    // border: 1px solid red;
    width: 100%;
    height: 100%;
    background-image: url("../../../static/images/yuyueHead.png");
    background-size: 100%;
    background-repeat: no-repeat;
    padding: 0.52rem 0.25rem 0.25rem 0.25rem;
    position: relative;
    .headContentBox {
      height: 2.78rem;
      border-radius: 0.15rem;
      box-shadow: 0rem 0rem 0rem rgba(232, 34, 34, 0.16);
      padding: 0.3rem 0.34rem;
      .goodTitleBox {
        justify-content: space-between;
        .goodsTitle {
          width: calc(~"100% - 2.2rem");
          font-weight: bold;
          font-size: 0.39rem;
          color: @color4e;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          word-break: break-all;
        }
        .goodsA {
          font-size: @fontsize3;
          color: #2987cf;
          width: 1.8rem;
          margin-left: 0.2rem;
          img {
            display: block;
            width: 0.11rem;
            height: 0.19rem;
            margin-left: 0.2rem;
          }
        }
      }

      .goodDescribe {
        font-size: @fontsize32;
        color: #9f9f9f;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        word-break: break-all;
      }
    }
    .yuyueTisiBox {
      // z-index: 99;
      position: absolute;
      width: calc(~"100% - 0.5rem");
      height: 2.98rem;
      margin-top: 0.25rem;
      padding: 0.22rem 0.44rem;
      border-radius: 0.15rem;
      .yuyueTisiTitle {
        font-size: 0.37rem;
        color: @color4e;
        font-weight: bold;
      }
      .yuyueTisiContent {
        text-align: center;
        font-size: 0.34rem;
        color: #c8c8c8;
        height: 2rem;
        padding: 0.24rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        word-break: break-all;
        justify-content: center;
      }
    }
  }
}
.yuyueContentBox {
  padding: 0.25rem;
  .yuyueInfoBox {
    margin-top: 1.8rem;
    height: auto;
    border-radius: 0.15rem;
    color: @color4e;
    .yuyueTitleBox {
      height: 1.13rem;
      padding: 0 0.44rem;
      border-bottom: 1px solid #eeeeee;
      font-size: @fontsize37;
      font-weight: bold;
    }
    .yuyueContent {
      padding: 0 0 0 0.44rem;
      font-size: 0.34rem;
      .yuyueInputBox {
        height: 1.4rem;
        border-bottom: 1px solid #eeeeee;
        .yuyueInputTitle {
          width: 1.6rem;
          margin-right: 0.64rem;
        }
        .yuyueInputContent {
          width: calc(~"100% - 2.3rem");
          justify-content: space-between;
          input {
            width: calc(~"100% - 1rem");
            height: 1rem;
            border: none;
            &::-webkit-input-placeholder {
              color: #c8c8c8;
            }
          }
          img {
            display: block;
            width: 0.13rem;
            height: 0.24rem;
            margin: 0rem 0.34rem;
          }
          
        }
        .timeBox {
            width: calc(~"100% - 2rem");
            .dateBox {
              width: 100%;
              input {
                width: calc(~"100% - 0.9rem");
                height: 1rem;
                border: none;
                &::-webkit-input-placeholder {
                  color: #c8c8c8;
                }
              }
               img {
                display: block;
                width: 0.13rem;
                height: 0.24rem;
                margin:0 0.34rem;
              }
            }
          }
      }
      .yuyueInputBox:last-child{
        border-bottom: none;
      }
      .yuyueInputNumberBox {
        border-top: 1px solid #eeeeee;
        border-bottom: 1px solid #eeeeee;
      }
    }

    
  }

  .consumerCodeBox {
    margin-top: 0.25rem;
    height: auto;
    // border: 1px solid red;

    .yuyueInputCodeBox {
      border-bottom: 1px solid #eeeeee;
    }
    .yuyueCodeContent{
      .yuyueInputBox{
        // border: 1px solid red;
        border-bottom: 1px solid #eeeeee;
      }
      .yuyueInputBox:last-child{
        border-bottom: none;
      }
    }
  }
  .consumerInfoBox{
    margin-top: 0.25rem;
    height: 5.71rem;
  }

}
    .payBox{
      height: 1.38rem;
      padding: 0 0.39rem 0 0.69rem;
      justify-content: space-between;

      .payPrice{
        width: calc(~'100% - 2.6rem');
        b{
          font-size: 0.39rem;
          color: @color4e;
        }
        span{
          font-size: @fontsize32;
          color: @colorRed;
        }
      }
      .lijiYueBox{
        width:2.41rem;
        height:0.85rem;
        background:linear-gradient(90deg,rgba(246,65,53,1) 0%,rgba(255,205,88,1) 100%);
        box-shadow:0rem 0rem 0rem rgba(255,112,79,0.4);
        font-size:0.34rem;
        font-weight:bold;
        color:rgba(255,255,255,1);
        border-radius: 1.4rem;
        text-align: center;
        line-height: 0.85rem;
      }
    }
</style>
